import $http from '@/utils/http'
import * as echarts from 'echarts'

interface CommonColor {
  splitLineColor: string, // x轴条分割线
  fontColor: string, // 字体颜色
  axisLineColor: string // x轴分割线
}

const useCharts = (proxy: any, chartsList: any) => {
  const optionNames: string[] = chartsList.map((el: any) => el.name)

  const colors: CommonColor = {
    splitLineColor: '#e1f3ff',
    fontColor: '#fefefe',
    axisLineColor: 'rgba(63, 76, 95, 0.5)'
  }

  const tooltipStyle: any = {
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    borderWidth: 0,
    textStyle: {
      color: colors.fontColor,
      fontSize: 12
    },
    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);',
  }

  const options: any = {
    line1Option: {
      color: [],
      tooltip: {
        trigger: 'axis',
        ...tooltipStyle
        // axisPointer: { type: 'cross', label: { backgroundColor: 'rgba(0,0,0,0.3)' } },
      },
      legend: {
        data: ['昨日增长', '今日增长'],
        textStyle: {
          color: colors.fontColor,
          fontSize: 12,
        }
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '0%',
        top: '18%',
        containLabel: true,
      },
      title: {},
      xAxis: {
        type: 'category',
        axisLabel: {
          // interval: 0,
          color: colors.fontColor,
          fontSize: 12,
        },
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: colors.axisLineColor
          }
        },
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六'],
      },
      yAxis: [{
        type: 'value',
        axisLabel: {
          color: colors.fontColor,
          fontSize: 12
        },
        splitLine: {
          lineStyle: {
            color: colors.splitLineColor,
            opacity: 0.1
          }
        },
      }],
      series: [
        {
          areaStyle: {
            opacity: 0.4,
            color: {
              colorStops: [
                { offset: 0, color: '#5BB1FF' },
                { offset: 1, color: 'rgba(0, 0, 0, 0)' },
              ],
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: 'linear',
              global: false,
            },
          },
          data: [],
          name: '昨日增长',
          smooth: true,
          emphasis: { focus: 'series' },
          type: 'line',
        },
        {
          areaStyle: {
            opacity: 0.4,
            color: {
              colorStops: [
                { offset: 0, color: '#AD49FF' },
                { offset: 1, color: 'rgba(0, 0, 0, 0)' }
              ],
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: 'linear',
              global: false,
            },
          },
          data: [],
          name: '今日增长',
          smooth: true,
          emphasis: { focus: 'series' },
          type: 'line',
        },
      ],
    },
    line2Option: {
      grid: {
        left: '5%',
        right: '5%',
        bottom: '0%',
        top: '18%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        ...tooltipStyle,
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'line', // 默认为直线，可选为：'line' | 'shadow'
          lineStyle: {
            color: '#57617B'
          }
        },
        formatter: (params: any) => {
          const p1 = params[0]
          const p2 = params[1]
          const text1 = `${p1.marker} ${p1.seriesName}：${p1.data} 辆/分钟`
          const text2 = `${p2.marker} ${p2.seriesName}：${p2.data} Km/h`
          return `${p1.axisValue}<br/>${text1}<br/>${text2}`
        }
      },
      legend: {
        left: 'center',
        textStyle: {
          color: colors.fontColor,
          fontSize: 12
        },
        itemWidth: 18,
        itemHeight: 2,
      },
      xAxis: [{
        type: 'category',
        axisLine: {
          show: false
        },
        axisLabel: {
          color: colors.fontColor
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        boundaryGap: false,
        data: ['13:00', '13:30', '14:00', '14:30', '15:00', '15:30'],
      }],
      yAxis: [{
        name: '辆/分钟',
        nameTextStyle: {
          color: colors.fontColor,
          fontSize: 12,
        },
        // type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: colors.splitLineColor,
            opacity: 0.1
          }
        },
        min: 0,
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          margin: 20,
          formatter: '{value}',
          fontSize: 12,
          color: colors.fontColor
        },
        axisTick: {
          show: false,
        },
      },
      {
        name: 'Km/h',
        nameTextStyle: {
          color: colors.fontColor,
          fontSize: 12,
        },
        min: 0,
        max: 200,
        type: 'value',
        axisLabel: {
          formatter: '{value}',
          color: colors.fontColor,
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            type: 'dotted',
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
        }
      }],
      series: [{
        name: '平均车流量',
        type: 'line',
        yAxisIndex: 0,
        smooth: true, //是否平滑
        showSymbol: false,
        symbolSize: 10,
        lineStyle: {
          width: 2,
          color: {
            type: 'linear',
            colorStops: [{
              offset: 0,
              color: '#3090FF' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#54FFF6' // 100% 处的颜色
            }]
          }
        },
        itemStyle: {
          color: {
            type: 'linear',
            colorStops: [{
              offset: 0,
              color: '#3090FF' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#54FFF6' // 100% 处的颜色
            }]
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(48, 144, 255, 0.2)'
            },
            {
              offset: 1,
              color: 'rgba(48, 144, 255, 0)'
            }],
          }
        },
        data: [110, 100, 120, 90, 100, 95]
      },
      {
        name: '平均车速',
        type: 'line',
        yAxisIndex: 1,
        smooth: true, //是否平滑
        showSymbol: false,
        symbolSize: 10,
        lineStyle: {
          width: 2.5,
          type: 'dotted',
          color: {
            type: 'linear',
            colorStops: [{
              offset: 0,
              color: '#54FFF6' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#2CFFCA' // 100% 处的颜色
            }]
          }
        },
        itemStyle: {
          color: {
            type: 'linear',
            colorStops: [{
              offset: 0,
              color: '#54FFF6' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#2CFFCA' // 100% 处的颜色
            }]
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(48, 144, 255, 0.2)'
            }, {
              offset: 1,
              color: 'rgba(48, 144, 255, 0)'
            }],
            // global: false // 缺省为 false
          }
        },
        data: [60, 78, 100, 58, 96, 75],
      }]
    },
    line3Option: {
      tooltip: {
        trigger: 'axis',
        ...tooltipStyle
      },
      legend: {
        data: ['昨日办理趋势', '今日办理趋势'],
        textStyle: {
          color: colors.fontColor,
          fontSize: 12,
        }
      },
      grid: {
        left: '5%',
        right: '8%',
        bottom: '0%',
        top: '18%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // boundaryGap: false,//坐标轴两边留白
        name: 'h',
        nameTextStyle: {
          color: colors.fontColor,
          fontSize: 12,
        },
        axisLabel: { //坐标轴刻度标签的相关设置。
          color: colors.fontColor,
          fontSize: 12,
        },
        axisTick: {//坐标轴刻度相关设置。
          show: false,
        },
        axisLine: {//坐标轴轴线相关设置
          lineStyle: {
            color: colors.axisLineColor,
          }
        },
        splitLine: { //坐标轴在 grid 区域中的分隔线。
          show: false
        },
        data: [],
      },
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            color: colors.fontColor,
            fontSize: 12,
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          scale: true,
          splitLine: {
            show: true,
            lineStyle: {
              color: colors.splitLineColor,
              opacity: 0.1
            }
          }
        }
      ],
      series: [
        {
          name: '昨日办理趋势',
          type: 'line',
          showSymbol: false,
          itemStyle: {
            color: 'rgba(32, 153, 255, 1)',
            lineStyle: {
              color: 'rgba(32, 153, 255, 1)',
              width: 2
            },
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(32, 153, 255, 0)'
            }, {
              offset: 1,
              color: 'rgba(32, 153, 255, 0.35)'
            }]),
          },
          data: []
        },
        {
          name: '今日办理趋势',
          type: 'line',
          showSymbol: false,
          itemStyle: {
            color: 'rgba(208, 38, 198, 1)',
            lineStyle: {
              color: 'rgba(208, 38, 198, 1)',
              width: 2
            },
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(208, 38, 198, 0)'
            }, {
              offset: 1,
              color: 'rgba(208, 38, 198, 0.35)'
            }])
          },
          data: []
        }
      ]
    }
  }
  optionNames.forEach(async (type: string) => {
    const res: any = await $http(`charts/${type}`)
    console.log(type, res)
    handleChart(type, res)
  })
  const handleChart = (type: string, res: any) => {
    switch (type) {
      case 'line1':
        options[`${type}Option`].color = res.colors
        options[`${type}Option`].series[0].data = res.list.todayGrowth
        options[`${type}Option`].series[1].data = res.list.yesterdayGrowth
        options[`${type}Option`].series[0].areaStyle.color.colorStops[0].color = res.colors[0]
        options[`${type}Option`].series[1].areaStyle.color.colorStops[0].color = res.colors[1]
        break
      case 'line2':
        break
      case 'line3':
        for (let i = 9; i <= 18; i++) {
          let d = i < 10 ? '0' + i : i
          options[`${type}Option`].xAxis.data.push(d)
        }
        options[`${type}Option`].series[0].data = res.list.todayGrowth
        options[`${type}Option`].series[1].data = res.list.yesterdayGrowth
        break
      default:
        break
    }
    proxy.$refs[`${type}ChartRef`].setOption(options[`${type}Option`])
  }
}
export default useCharts